<template>
    <div class="background">
        <el-container class="container">
            <el-header class="center" style="font-size: 40px; margin-top: 50px;">宏华企业制造执行系统</el-header>
            <el-main class="center">
                <div class="loginModel">
                    <el-form :model="user" label-width="80px">

                        <el-form-item label="账号" placeholder="请输入账号">
                            <el-input v-model="user.userName"></el-input>
                        </el-form-item>

                        <el-form-item label="密码" placeholder="请输入密码">
                            <el-input v-model="user.passWord" type="password"></el-input>
                            <el-checkbox v-model="user.rememberMe">记住我</el-checkbox>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="login">登录</el-button>
                            <el-button>忘记密码</el-button>
                        </el-form-item>

                    </el-form>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import qs from 'qs';
export default {
    data() {
        return {
            user: {
                userName:"admin",
                passWord:"123456"
            },
        }
    },
    mounted() {
        this.freeLogin();
    },
    methods: {
        login() {
            // this.$router.push({ name: 'main' });
            let qsStr = qs.stringify(this.user);

            console.log();


            this.$axios.post("http://localhost:9970/emsSystem/api/login", qsStr).then((res) => {
                if (res.data.code === 200) {
                    // this.$store.dispatch('asyncUpdateUser', { userLoginInfo: res.data })
                    this.$message.success('登录成功');
                    //前端存储jwt
                    if (this.user.rememberMe === true) {
                        window.localStorage.setItem("dlyk_token", res.data.data);
                    } else {
                        window.sessionStorage.setItem("dlyk_token",res.data.data);
                    }
                    this.$router.push({ name: 'mainShow' });
                } else {
                    this.$message.error('账号或密码错误');
                }
            })
        },
        freeLogin() {
            let token = window.localStorage.getItem("dlyk_token");
            if (token) { //表示token有值，token不是空，token存在
                this.$axios.get("/api/login/free", {}).then(resp => {
                    if (resp.data.code === 200) {
                        //token验证通过了，那么可以免登录
                        this.$router.push({ name: 'mainShow' });
                    }
                })
            }
        }
    }
}
</script>

<style>
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.background {
    background-image: url('../assets/login-background.jpg');
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    align-items: center;
}

.container {
    opacity: 1;
}
</style>
